<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>allocate</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="/js/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/js/bootstrap.bundle.js"></script>
    <script src="/js/transmitdata.js"></script>
    <style>
         table {
          width: 100%;
          table-layout: fixed; /* 设置所有列宽度相同 */
          border-collapse: collapse; /* 合并边框 */
        }
    
        th, td {
          width: 15px; /* 设置每个单元格的宽度 */
          border: .1px solid #ddd; /* 边框样式，可根据需要调整 */
          padding: 2px; /* 内边距，可根据需要调整 */
          text-align: center; /* 文本对齐方式，可根据需要调整 */
          font-size: 10px;
          overflow: hidden;
        }
    </style>
</head>
<body>
    <button style="background-image: url(/photo/reMenu.png);background-position: center;height: 4vh;width: 4vh; background-repeat: no-repeat;background-size: cover;" onclick="formSubmit(`get`,`/menu/reMenu`,null);"></button>

    <nav aria-label="...">
        <ul class="pagination pagination-sm" id="inodePage">
         
        </ul>
      </nav>
    <table  id="inodeShow">
         
    </table>
    <script th:inline="javascript">
       
/*<![CDATA[*/
        var inodeBitMap=/*[[${inodeBitMap}]]*/ [];
        var end=false;
        console.log(inodeBitMap)
        function initInodePage(){
        var pagenumber=Math.ceil(inodeBitMap.length/144);
        var node=$("#inodePage")[0]
        for(var i=0;i<pagenumber;i++)
        {
           var li=document.createElement("li")
           li.classList.add("page-item");
           li.innerHTML=`<a class="page-link" href="#" onclick="inodeClick(${i})">#${i*144}-${(i+1)*144-1}</a>`
           node.appendChild(li)
        }
        }
        function inodeClick(number)
        {
            var node=$("#inodePage .active")[0];
            if(isNotNull(node)){
            node.classList.remove("active");}
            var nodeList=$("#inodePage .page-item");
            nodeList[number].classList.add("active");
            //
            var table=$("#inodeShow")[0];
            table.innerHTML=""
            var tr=document.createElement("tr");

            for(var i=number*144;i<(number+1)*144-1;i++)
            { 
                if(!end){
                if(inodeBitMap[i])
              tr.innerHTML+=`<th style="background-color: red;">${i}</th>`;
              else
              tr.innerHTML+=`<th style="background-color: green;">${i}</th>`;
                if(i==inodeBitMap.length-1)
                {
                    end=true;
                }
            }
        else{
            tr.innerHTML+=`<th style="background-color: white;">---</th>`;
        }
        if(i%12==11)
                {
                 table.appendChild(tr);
                 tr=document.createElement('tr');

                }
            }
        }
        

    
/*]]>*/


    </script>
    <script>
initInodePage();
    </script>
    
</body>
</html>